<template>
	<view class="contract-page">
		<!-- 		<view class="notice" v-if="type === 'qian'">
			确认订单则租期时间从今日日期开始计算！
		</view> -->
		<scroll-view class="scroll" scroll-x>
			<view class="rich">
				<uv-parse :content="content"></uv-parse>
			</view>
		</scroll-view>
		<view class="btns" v-if="type === 'qian'">
			<button class="cu-btn" @click="goSign">{{ isQian ? '已签署' : '去签署' }}</button>
			<button class="cu-btn" @click="handSubmit">完成</button>
		</view>
		<view class="btns" v-else-if="orderId">
			<button class="cu-btn" @click="handCopy">复制链接</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		doRich
	} from '@/apis/home.js'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getCapital
	} from '@/utils'
	import uploadFile from '@/utils/ossutil/uploadFile.js'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')
	let isQian = ref(false)

	let signature = ''
	uni.$on('q-sign', img => {
		uploadFile(img, 'images/', img, (src => {
			signature = src
			isQian.value = true
			content.value = oldContent.value.replaceAll('${row.qianImg}',
				`<img src='${src}' style="transform:  width: 240px; height: 80px; object-fit: cover; margin-left: 10px;  " />`
			)
		}), (err => {

		}), (res => {

		}))
	})

	const handSubmit = () => {
		if (!signature) {
			uni.$uv.toast('请先签名')
			return
		}
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.emit('successEvent', signature);
		$back()
	}
	onUnload(() => {
		uni.$off('q-sign')
	})

	const goSign = () => {
		uni.navigateTo({
			url: '/uni_modules/q-sign/pages/q-sign'
		})
	}

	const handCopy = () => {
		uni.setClipboardData({
			data: `https://qianyuan-admin.joynet.top/userContract?id=${orderId.value}`,
			success: function() {
				console.log('success');
			}
		});
	}
	const content = ref('')
	const oldContent = ref('')
	const type = ref('qian')
	const orderId = ref('')
	onLoad(async (options) => {
		type.value = options?.type || 'prive'
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', async (htInfo) => {
			orderId.value = htInfo.orderId
			const data = await doRich(htInfo?.jiaqianImg ? 'MERCHANT_CONTRACT' :
				'CONTRACT_TEMPLATE')
			for (const htInfoKey in htInfo) {
				if (!['contractSeal', 'qianImg'].includes(htInfoKey)) {
					data.content = data.content.replaceAll('${row.' + htInfoKey + '}', htInfo[
						htInfoKey] || '')
				}
			}
			oldContent.value = uni.$uv.deepClone(data).content
			// 签名替换
			if (htInfo.qianImg) {
				isQian.value = true
				data.content = data.content.replaceAll(
					'${row.qianImg}',
					`<img src='${htInfo.qianImg}' style="transform:  width: 240px; height: 80px; object-fit: cover; margin-left: 10px;  " />`
				)
			} else {
				data.content = data.content.replaceAll('${row.qianImg}', '')
			}
			// 公章替换
			if (htInfo.contractSeal) {
				if (htInfo?.jiaqianImg) {
					data.content = data.content.replaceAll(
						'${row.contractSeal}',
						`<img style="width: 100px; height: 100px; object-fit: cover; position: absolute; bottom: 150px; left: 150px" src="${htInfo.contractSeal}">`
					)
				} else {
					data.content = data.content.replaceAll(
						'${row.contractSeal}',
						`<img style="width: 100px; height: 100px; object-fit: cover; position: absolute; bottom: 50px; left: 150px" src="${htInfo.contractSeal}">`
					)
				}
			} else {
				data.content = data.content.replaceAll('${row.contractSeal}', '')
			}
			content.value = data.content
		})

	})
</script>

<style lang="scss" scoped>
	.contract-page {
		position: relative;
		width: 750rpx;
		min-height: 100vh;
		padding: 10rpx;

		.notice {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			background-color: #FF9113;
			color: #fff;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			text-align: center;
			z-index: 10;
		}

		.rich {
			width: 1300rpx;
			transform: scale(0.56);
			transform-origin: top left;
		}

		.btns {
			position: fixed;
			padding: 24rpx;
			bottom: 0;
			padding-bottom: 24rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 750rpx;


			.cu-btn {
				padding: 0 20rpx;
				font-size: 26rpx;
				height: 70rpx;

				&:last-child {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>